<template>
    <div class="box-wrap">
        <div class="top">
            <div class="back" @click="$router.back(-1)">返回</div>
        </div>
        <el-row :gutter="20">
            <el-col :span="4" v-for="(item,index) in dataList" :key="index">
                <div class="btn" :class="item.status | statusToColor" @click="openDialog(item)">
                    {{item.scodeName}}
                    <i class="el-icon-view" @click.stop="showMessage(item.message)"></i>
                </div>
            </el-col>
        </el-row>
    <el-dialog title="核验条件选择" :visible.sync="dialogVisible" @close="handleClose()" :close-on-click-modal="false">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="时间">
                <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期" :default-time="['00:00:00', '23:59:59']"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="表名">
                <el-select v-model="form.tableName" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.tableCode" :label="item.tableCodeName"
                        :value="item.tableCode">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="办案区" v-if="ptCode==3">
                <div class="df">
                    <el-select v-model="form.baqIp" placeholder="请选择" style="margin-right:20px" clearable>
                        <el-option v-for="item in baqIpOptions" value-key="scodeName" :key="item.scodeName" :label="item.scodeName" :value="item.ptIp">
                        </el-option>
                    </el-select>
                    <el-checkbox v-model="checkedALL">全部</el-checkbox>
                </div>
                
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm" :loading="loadingForm">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog title="数据实时更新时间" :visible.sync="dialogVisibleMessage" width="600px" append-to-body @close="handleCloseM()" :close-on-click-modal="false">
        <el-table :data="message" style="width: 100%">
            <el-table-column prop="name" label="表名" width="200" align="center">
            </el-table-column>
            <el-table-column prop="tableName" label="中文表名" width="200" align="center">
            </el-table-column>
            <el-table-column prop="time" label="推送时间" width="200" align="center">
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
        </span>
    </el-dialog>

    <el-dialog title="数据流向" :visible.sync="dialogVisibleS" @close="handleCloseS" append-to-body :close-on-click-modal="false">
        <div class="border-wrap" v-if="info">
            <div class="df">
                <div class="item item1" :class="info.status==1 && info.dataSjzx ? 'red' : 'green'">
                    {{infoName}}(数量：{{info.baqCount}})
                </div>
                <div class="line" :class="info.status==1 && info.dataSjzx ? 'red' : 'green'">
                    <div class="icon df">
                        <el-popover v-if="info.status==1 && info.dataSjzx" placement="top" width="250" trigger="hover">
                            <p style="margin-bottom:10px">核查差异数据{{info.baqCount - info.sjzxCount}}条，建议手动同步或检查对接</p>

                            <i class="el-icon-warning red" type="text" slot="reference" @click="showDetail(info.dataSjzx,'sjzx')"></i>
                        </el-popover>

                        <el-popover v-if="num"  placement="top" trigger="hover" :content="`共${info.sjzxCount}条数据，核查有问题数据${num}条`" width="260">
                            <div slot="reference">
                                <i class="el-icon-warning yellow" type="text" @click.stop="showDetailInfo"></i>
                            </div>
                        </el-popover>
                    </div>
                </div>  
                <div>
                    <div class="item item2 df" :class="info.status==1 && info.dataSjzx ? 'red' : 'green'" >
                        {{zfjdList[0].fcodeName}}(数量：{{info.sjzxCount}}) 
                        
                        </div>
                    <div class="line1" :class="info.status==1 && info.dataZfjd ? 'red' : 'green'" >
                        <div class="icon">
                            <el-popover v-if="info.status==1 && info.dataZfjd" placement="top" width="250" trigger="hover">
                                <p style="margin-bottom:10px">核查差异数据{{info.sjzxCount - info.zfjdCount}}条，建议手动同步或检查对接</p>
                            
                                <i class="el-icon-warning red" type="text" slot="reference" @click="showDetail(info.dataZfjd,'zfjd')"></i>
                            </el-popover>
                        </div>
                    </div>
                    <div class="item item3" :class="info.status==1 && info.dataZfjd ? 'red' : 'green'">{{zfjdList[0].scodeName}}(数量：{{info.zfjdCount}})</div>
                </div>
            </div>       
        </div>
        <span slot="footer" class="dialog-footer">

        </span>
    </el-dialog>

    <el-dialog title="数据详情" :visible.sync="dialogVisibleT" @close="closeDialog('dialogVisibleT')" append-to-body :close-on-click-modal="false" class="table-dialog">
        <el-table :data="tableData" border style="width: 100%" height="600">
            <template v-for="(item,idx) in tableHeaderConfig">
                <el-table-column :prop="item.label" :label="item.prop" align="center">
                </el-table-column>
            </template>
        </el-table>
        <div class="dfc">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNum" :page-sizes="[10, 20, 30, 40,50]" :page-size="pageInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
            </el-pagination>
        </div>     
        <span slot="footer" class="dialog-footer">
            <el-button type="primary"  @click="getInfo" :loading="loadingInfo">手动同步</el-button>
            <el-button @click="closeDialog('dialogVisibleT')">取 消</el-button>
        </span>
    </el-dialog>

    <el-dialog title="数据详情" :visible.sync="dialogVisibleD" @close="closeDialog('dialogVisibleD')" append-to-body :close-on-click-modal="false"
        class="table-dialog">
        <el-table :data="hcTableData" border style="width: 100%" height="600">
            <el-table-column prop="codename" label="核查单位" align="center" width="170">
            </el-table-column>
            <el-table-column prop="tablename" label="核查表名" align="center" width="200">
            </el-table-column>
            <el-table-column prop="column" label="核查字段" align="center">
            </el-table-column>
            <el-table-column prop="value" label="核查值" align="center">
            </el-table-column>
            <el-table-column prop="tip" label="问题描述" align="center">
            </el-table-column>
            <el-table-column prop="deptcode" label="IP地址" align="center">
            </el-table-column>
            <el-table-column prop="inserttime" label="核查时间" align="center" width="170">
            </el-table-column>
        </el-table>
        <div class="dfc">
            <el-pagination background @size-change="handleSizeChangeOne" @current-change="handleCurrentChangeOne"
                :current-page="pageInfo.pageNum" :page-sizes="[10, 20, 30, 40,50]" :page-size="pageInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
            </el-pagination>
        </div>
    </el-dialog>

    </div>
</template>

<script>
import Api from './api/api';
import * as dayjs from 'dayjs'
let sCode, parentPtCode, parentPtIp
export default {
    data() {
        return {
            num:0,
            dialogVisibleD:false,
            loadingForm: false,
            loadingInfo: false,
            dataList:[],
            title:'',
            dialogVisible: false,
            dialogVisibleS: false,
            dialogVisibleT: false,
            form: {
                startTime: '',
                endTime: '',
                tableName: '',
                baqIp: '',
                sjzxIp: '',
            },
            options: [],
            dateRange: [],
            dialogVisibleMessage:false,
            info:null,
            baqIp:'',
            sjzxIp:'',
            tableData:[],
            baqIpOptions:[],
            ptCode:1,
            zfjdList:[],
            checkedALL:false,
            infoName:'',
            pageInfo:{
                pageSize:10,
                pageNum:1,
                total:0
            },
            tableHeaderConfig:[],
            hcTableData:[],
            hcAllTableData:[],
        }
    },
    created(){
        let { scode, ptCode, ptIp } = this.$route.params
        sCode = scode
        parentPtCode = ptCode
        parentPtIp = ptIp
        this.getPtTree()
        this.dateRange = [dayjs(new Date()).format("YYYY-MM-DD") + ' 00:00:00', dayjs(new Date()).format("YYYY-MM-DD") + ' 23:59:59']
    },
    methods: {
        getPtTree () {
            let callBack = res => {
                this.dataList = res.data || []
                if (this.dataList.length == 0) return
                this.dataList.forEach(item => {
                    Api.querySjjcLogInfo({ code: item.scode, createTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss") }, (res) => {
                        if (res.data && res.data.length != 0) {
                            this.$set(item, 'status', res.data[0].status)
                            this.$set(item, 'message', res.data[0].message)
                        } else {
                            this.$set(item, 'status', 0)
                        }
                    })
                })
            }
            Api.queryPtxjInfo({ sCode }, callBack)
        },
        //获取表名
        getPtTableConfig () {
            let callBack = res => {
                this.options = res.data
            }
            Api.queryPtTableConfig({}, callBack)
        },
        handleClose(){
            this.dateRange = [dayjs(new Date()).format("YYYY-MM-DD") + ' 00:00:00', dayjs(new Date()).format("YYYY-MM-DD") + ' 23:59:59']
            this.dialogVisible = false
            this.form.tableName = ''
            this.form.baqIp = ''
        },
        handleCloseM(){
            this.dialogVisibleMessage = false
        },
        handleCloseS (){
            this.dialogVisibleS = false
        },
        closeDialog (name){
            this[name] = false
        },

        changeOptions(val){
            console.log(val)
        },  

        openDialog(item){
            if(item.status==0) return
            this.dialogVisible = true
            this.ptCode = item.ptCode
            if (parentPtCode == 2) {
                this.sjzxIp = parentPtIp
            }
            this.getPtTableConfig()
            let arr = [...this.dataList]
            this.baqIpOptions = arr.filter(item=>item.ptCode!=3)
            this.zfjdList = arr.filter(item=>item.ptCode==3)
            this.selectItem = item
        },

        queryRulesLogResultList(){
            let parmas={
                code: sCode,
                tablename:this.form.tableName
            }
            Api.queryRulesLogResultList(parmas,(res)=>{
                if (res.data){
                    this.hcAllTableData = res.data
                    this.num = res.data.length
                }
                this.dialogVisibleS = true
            })
        },

        showDetailInfo(){
            this.pageInfo.pageSize = 30
            this.pageInfo.pageNum = 1
            this.getDataList(this.hcAllTableData, 'hcTableData')
            this.dialogVisibleD = true
        },


        async submitForm () {
            this.loadingForm = true
            this.info = null
            if(!this.form.tableName) return this.$message.error('请选择表名')
            if (this.ptCode == 3 && !this.checkedALL && !this.form.baqIp) return this.$message.error('请选择办案区')
            let params = {
                startTime: '',
                endTime: '',
                tableName: this.form.tableName,
                baqIp: '',
                zfjdIp: '',
                sjzxIp: [this.sjzxIp],
            }
            if (this.dateRange && this.dateRange.length != 0) {
                params.startTime = this.dateRange[0]
                params.endTime = this.dateRange[1]
            } else {
                params.startTime = null
                params.endTime = null
            }

            if (this.ptCode==1){
                params.baqIp = [this.selectItem.ptIp]
                params.zfjdIp = this.zfjdList[0].ptIp
                this.infoName = this.selectItem.scodeName
                this.baqIp = [this.selectItem.ptIp]
            } else if (this.ptCode == 3) {
                let baqIp = [],baqCode = []
                if(this.checkedALL){
                    baqIp = this.baqIpOptions.map(item => item.ptIp)
                    baqCode = this.baqIpOptions.map(item => item.scode)
                    params.baqIp = baqIp
                    this.infoName = '全部办案区'
                    this.baqIp = baqIp
                    this.baqCode = baqCode.join(',')
                } else{
                    params.baqIp = [this.form.baqIp]
                    let obj = this.baqIpOptions.filter(item => item.ptIp == this.form.baqIp)
                    this.infoName = obj[0].scodeName
                    this.baqIp = [this.form.baqIp]
                    this.baqCode = obj[0].scode
                }
                params.zfjdIp = this.selectItem.ptIp
            }

            Api.checkBaq({ ...params }, (res) => {
                if (res.code == 20001) {
                    this.info = res.data
                    this.loadingForm = false
                    this.queryRulesLogResultList()
                } else {
                    this.loadingForm = false
                    this.$message.error(res.msg)
                }
            })
            
        },
        showMessage (message) {
            if (!message) return
            this.dialogVisibleMessage = true
            let msg = JSON.parse(message)
            this.message = []
            msg.forEach(item=>{
                let obj = {
                    name: '',
                    tableName: '',
                    time: ''
                }
                for (let i in item) {
                    if (i !='tableName'){
                        obj.name = i
                        obj.time = item[i]
                    } else{
                        obj.tableName = item[i]
                    }
                }
                this.message.push({...obj})
                
            })
        },
        getInfo() {
            this.loadingInfo = true
            let parmas = {
                listStr: JSON.stringify(this.allTableData),
                sjzxIp: [parentPtIp],
                zfjdIp: '',
                tableName: this.form.tableName
            }

            if (this.name == 'zfjd'){
                parmas.zfjdIp = this.zfjdList[0].ptIp
            }
                
            Api.insertData(parmas, (res) => {
                if (res.code == 20001) {
                    this.$message.success(res.msg)
                    this.dialogVisibleT = false
                    this.dialogVisibleS = false
                    this.loadingInfo = false
                } else{
                    this.loadingInfo = false
                    this.$message.error(res.data)
                }
                
            })
        },
        showDetail(info,name){
            if (info && info.length==0) return
            this.pageInfo.pageSize = 30
            this.pageInfo.pageNum = 1
            this.allTableData = info
            this.name = name
            let ptCode = name=='zfjd' ? 3 : 2
            let code = name == 'zfjd' ? this.zfjdList[0].scode : sCode
            this.getDataList(info,'tableData')
            this.getQuerySql(ptCode, code)
            this.dialogVisibleT = true
        },

        getDataList(list,name){
            console.log(list, 'list')
            let parmas = {
                jsonReslut: JSON.stringify(list),
                currentPage: this.pageInfo.pageNum,
                pageSize: this.pageInfo.pageSize,
            }
            Api.queryListPage(parmas, (res) => {
                this[name] = res.data
                this.pageInfo.total = list.length
            })
        },

        getQuerySql (ptCode, code){
            let params = {
                ptTable: this.form.tableName,
                ptCode,
                code,
            }
            Api.querySql(params, res=>{
                console.log(res, 'res')
                this.tableHeaderConfig = res.data
            })
        },

        handleSizeChange(val){
            this.pageInfo.pageSize = val
            this.pageInfo.pageNum = 1
            this.getDataList(this.allTableData,'tableData')
        },
        handleSizeChangeOne (val){
            this.pageInfo.pageSize = val
            this.pageInfo.pageNum = 1
            this.getDataList(this.hcAllTableData,'hcTableData')
        },

        handleCurrentChange (val) {
            this.pageInfo.pageNum = val
            this.getDataList(this.allTableData, 'tableData')
        },
        handleCurrentChangeOne (val) {
            this.pageInfo.pageNum = val
            this.getDataList(this.hcAllTableData, 'hcTableData')
        }

    },
    filters:{
        statusToColor(obj){
            let item={
                0:'gray',
                1:'green'
            }
            return item[obj]
        }
    }
}
</script>
<style scoped>

</style>

